<template>
  <div class="container">
    <img class="logo" :src="'http://localhost:8000'+header.logo_img.cf_value" alt="">
    <!-- Bigger-than-xs -->
    <p class="hidden-in-xs language">简体中文</p>
    <i class="hidden-in-xs fas fa-sort-down"></i>
    <ul class="hidden-in-xs nav-list">
        <router-link to="/"><li :class="{'active':!(parseInt($route.params.active)>-1)}">美梦首页</li></router-link>
        <router-link v-for="(menu,index) in header.menu" :key="index" :to="menu.url+'/'+index"><li :class="{'active':$route.params.active==index}">{{menu.cate_name}}</li></router-link>
    </ul>
    <!-- Bigger-than-xs-end -->

    <!-- On-xs -->
    <i class="xs-only fas fa-bars" v-show="!nav_show" @click="nav_show=!nav_show"></i>
    <i class="xs-only fas fa-times" v-show="nav_show" @click="nav_show=!nav_show"></i>
    <ul v-show="nav_show" class="xs-only nav-list">
        <li :class="{'active':!(parseInt($route.params.active)>-1)}"><router-link to="/" >美梦首页</router-link></li>
        <li  v-for="(menu,index) in header.menu" :key="index" :class="{'active':$route.params.active==index}"><router-link  :to="menu.url+'/'+index">{{menu.cate_name}}</router-link></li>
    </ul>
    <!-- On-xs-end -->    
  </div>
</template>
<script>
export default {
    
  data(){
      return{
          nav_show:false,
          header:{

          }
      }
  },
  created:function(){
      let that=this;
      this.$axios.get('http://localhost:8000/api/header')
        .then(function (response) {

          that.header=response.data.header
        })
        .catch(function (response) {
        });
  },
  mounted:function(){
  }
}
</script>

<style lang="less" scoped>
  @import url('../style/mixin.less');
  .container {
    width: 100%;
    background: #ffffff;
    height: 135px;
    position: relative;
    .fa-bars,.fa-times{
        font-size: 20px;
        color: #a17657;
        position: absolute;
        right: 15px;
        top: 15px;
    }
    .language {
      width: 48px;
      height: 12px;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 24px;
      letter-spacing: 0px;
      color: #a17657;
      right: 440px;
      position: absolute;
      top: 12px;
    }
    .fa-sort-down {
      font-size: 12px;
      letter-spacing: 0px;
      color: #a17657;
      right: 418px;
      position: absolute;
      top: 15px;
    }
    .hidden-in-xs.nav-list{
        position: absolute;
        top: 77px;
        left: 937px;
        li{
            list-style: none;
            float: left;
            height: 17px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 24px;
            letter-spacing: 0px;
            color: #50311a;
            padding-right: 44px;
            &.active{
                color: #50311a;
                font-weight: bold;
            }
        }
    }
    .xs-only.nav-list{
        width: 100%;
        height: calc(100vh - 44px);
        background: #FFF;
        position: absolute;
        left: 0;
        top: 40px;
        z-index: 2;
        li{
            height: 44px;
            font-size: 14px;
            line-height: 44px;
            text-align: left;
            color: #a17657;
            margin: 0 20px;
            border-bottom: 1px solid #a17657;
            a{
                .A-all-state({
                    color: unset;
                    text-decoration:none;
                })
            }
            &.active{
                border-bottom: 2px solid #a17657;
            }
            &:first-child{
                margin-top: 35px;
            }
            &:last-child{
                border-bottom: 2px solid #a17657;                
            }
        }
    }
    .On-xs({
      height: 44px;
    });
    .logo {
      width: 396px;
      float: left;
      padding-left: 365px;
      height: 89px;
      padding-top: 23px;
      .On-xs({
        width: 162px;
        height: 36px;
        padding-top: 0;
        margin-top: 4px;
        margin-bottom: 4px;
        padding-left: 15px;
      });
    }
  }

</style>
